<template>
  <div>
  <div ref="echart" style="width:50%;height:400px;"></div>
  </div>
</template>
<script>
export default {
  mounted() {
  this.createEcharts()
  },
  methods: {
  async createEcharts() {
  const res = await this.$http.get('/orderTotal')
 // console.log(res.data)
  if (res.data.status != 'success') {
  this.$message.error('服务器错误')
  return
  } else {
  //将返回的数据转为echars需要的数组数据 [{ value: 1048, name: 'Search Engine' }],
  let echartData = res.data.result.map((item) => {
  return { value: item.orderCounts, name: item._id }
  })
  //获取DOM容器
  const echartDom = this.$refs.echart;
  if (echartDom) {
  //实例化echarts
  const myChart = this.$echarts.init(echartDom)
  //饼图配置信息option
  const option = {
  title: {
  text: '订单统计',
  subtext: '9个订单模块',


 
  left: 'center'
  },
  tooltip: {
  trigger: 'item'
  },
  legend: {
  orient: 'vertical',
  left: 'left'
  },
  series: [
  {
  name: '用户发单数量',
  type: 'pie',
  radius: '50%',
  data: echartData,
  emphasis: {
  itemStyle: {
  shadowBlur: 10,
  shadowOffsetX: 0,
  shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
  }
  }
  ]
  };
  //应用option配置
  myChart.setOption(option)
  }
  }
  }
  }
}
</script>